<template>
  <div class="bigcontainer">
    <div class="dataScreen-content" ref="dataScreenRef">
    <!-- <dv-full-screen-container class="full-screen-container"> -->
      <div class="header">
        <div class="header-left">
          <div class="pl-12 flex items-center">
            <el-image :src="require('../../../assets/images/bigscreen/logo.png')" fit="contain"></el-image>
            <el-image :src="require('../../../assets/images/bigscreen/title.png')" fit="contain" class="ml-5"></el-image>
          </div>
        </div>
        <div class="header-right">
          <div class="user" style="cursor: pointer;" @click="handlerRouter('/info/material')">
            <div class="user-name">退出大屏</div>
          </div>
          <div class="time font-sans">{{ time }}</div>
          <div class="user">
            <div class="user-icon">
              <el-image class="elimage" :src="require('../../../assets/images/bigscreen/user.png')" fit="contain"></el-image>
            </div>
            <div class="user-name">{{ this.$store.getters.nickname }}</div>
          </div>
          <!-- <div class="logout" @click="logout">
            <el-image class="elimage" :src="require('../../../assets/images/bigscreen/switch.png')" fit="contain"></el-image>
          </div> -->
          <div style="margin-right: 20px; cursor: pointer;" @click="toggleFullScreen">
            <svg-icon :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" style="height: 20px;width: 20px;" />
          </div>
        </div>
      </div>
      <div class="flex pl-40px pr-40px pb-40px pt-10px gap-16">
        <div class="flex-1">
          <div class="w-690px h-52px relative">
            <el-image
              class="w-full h-full"
              :src="require('../../../assets/images/bigscreen/left_bg.png')"
              fit="cover"
            ></el-image>
            <div class="flex items-center gap-8 absolute top-1/2 left-4 transform -translate-y-1/2">
              <el-image
                class="w-75px h-75px"
                :src="require('../../../assets/images/bigscreen/pre.png')"
                fit="contain"
              ></el-image>
              <div class="text-20px font-bold text-white">三方仓</div>
            </div>
          </div>
          <div>
            <div class="mt-40px">
              <bar-chart
                v-if="leftBarYData.length > 0"
                :key="leftBarKey"
                :data-group="leftBarDataGroup"
                :ydata="leftBarYData"
                :height="'850px'"
              ></bar-chart>
              <div
                v-else
                class="h-850px text-center leading-850px text-20px"
              >暂无数据</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="w-1093px h-52px relative">
            <el-image
              class="w-full h-full"
              :src="require('../../../assets/images/bigscreen/right_bg.png')"
              fit="cover"
            ></el-image>
            <div class="flex items-center gap-8 absolute top-1/2 left-4 transform -translate-y-1/2">
              <el-image
                class="w-75px h-75px"
                :src="require('../../../assets/images/bigscreen/pre.png')"
                fit="contain"
              ></el-image>
              <div class="text-20px font-bold text-white">全国仓库状态</div>
            </div>
          </div>
          <div>
            <div class="flex items-start justify-between">
              <div class="w-850px h-690px flex-shrink-0 relative overflow-hidden">
                <el-image
                  :src="require('../../../assets/images/bigscreen/mapbg.png')"
                  fit="contain"
                  class="w-850px h-690px absolute -left-178px -top-189px"
                  style="transform: scale(1.9);"
                ></el-image>
                <map-chart height="690px" width="850px"></map-chart>
              </div>
              <div class="flex items-center flex-col gap-17px mt-20px">
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">库存总数据：</div>
                    <div class="text-20px">{{ inventoryData.inStorageCount }}</div>
                  </div>
                </div>
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">入库总数量：</div>
                    <div class="text-20px">{{ inventoryData.enter }}</div>
                  </div>
                </div>
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">出库总数量：</div>
                    <div class="text-20px">{{ inventoryData.out }}</div>
                  </div>
                </div>
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">当日出库数据：</div>
                    <div class="text-20px">{{ inventoryData.todayOut }}</div>
                  </div>
                </div>
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">当日入库数据：</div>
                    <div class="text-20px">{{ inventoryData.todayEnter }}</div>
                  </div>
                </div>
                <div class="w-219px h-42px relative flex items-center justify-center">
                  <el-image
                    class="absolute w-full h-full"
                    :src="require('../../../assets/images/bigscreen/box.png')"
                    fit="contain"
                  ></el-image>
                  <div class="text-white flex items-center">
                    <div class="text-14px">累计当月出入库数据：</div>
                    <div class="text-20px">{{ inventoryData.monthAll }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-full h-52px relative bg-white bg-opacity-5 border-t-1px border-white border-opacity-30">
              <div class="flex items-center gap-8 absolute top-1/2 left-4 transform -translate-y-1/2">
                <el-image
                  class="w-75px h-75px"
                  :src="require('../../../assets/images/bigscreen/pre.png')"
                  fit="contain"
                ></el-image>
                <div class="text-20px font-bold text-white">操作记录</div>
              </div>
            </div>
            <div class="mt-10px">
              <div>
                <dv-scroll-board
                  v-if="scrollboardConfig.data.length > 0"
                  :config="scrollboardConfig"
                  class="h-150px"
                 />
                <div
                  v-else
                  class="h-150px text-center leading-150px text-20px"
                >暂无数据</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import BarChart from './components/BarChart';
import MapChart from './components/MapChart';
import { tripartiteMaterialChartApi, materialDataApi, operateRecordApi } from '@/api/hs/bigscreen';
import { parseTime } from '@/utils/ruoyi';

export default {
  name: 'BigScreen',
  components: {
    BarChart,
    MapChart,
  },
  data() {
    return {
      timer: null,
      time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      isFullScreen: false,
      scrollboardConfig: { // 滚动容器，在获取数据时配置
        data: [],
      },

      // 柱状图
      leftBarKey: 0,
      leftBarYData: [],
      leftBarDataGroup: [[],[],[]],
      // 右侧数据
      inventoryData: {
        inStorageCount: 0,
        enter: 0,
        out: 0,
        todayOut: 0,
        todayEnter: 0,
        monthAll: 0,
      },
      interval: null,
    }
  },
  async mounted() {
    this.timer = setInterval(() => {
      this.time = dayjs().format("YYYY-MM-DD HH:mm:ss")
    }, 1000)

    if (this.$refs.dataScreenRef) {
      this.$refs.dataScreenRef.style.width = `1920px`;
      this.$refs.dataScreenRef.style.height = `1080px`;
      if (window.innerWidth < 1920) {
        // this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
        this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
      } else {
        this.$refs.dataScreenRef.style.transform = `scale(1)`;
      }
    }
    window.addEventListener("resize", this.resize);

    this.getScrollboardData()
    this.tripartiteMaterialChart()
    this.materialData()

    this.interval = setInterval(() => {
      this.materialData()
      this.tripartiteMaterialChart()
      this.getScrollboardData()
    }, 10000)
  },
  methods: {
    materialData() {
      return new Promise((resolve, reject) => {
        materialDataApi()
          .then(res => {
            this.inventoryData.inStorageCount = res.data.inStorageCount || 0;
            this.inventoryData.enter = res.data.entryCountHistory || 0;
            this.inventoryData.out = res.data.shipCountHistory || 0;
            this.inventoryData.todayOut = res.data.shipCountToday || 0;
            this.inventoryData.todayEnter = res.data.entryCountToday || 0;
            this.inventoryData.monthAll = res.data.shipCountMonth || 0;
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    tripartiteMaterialChart() {
      return new Promise((resolve, reject) => {
        tripartiteMaterialChartApi()
          .then(res => {
            this.leftBarYData = (res.data.tripartiteMaterialList || []).map(item => item.warehouseName);
            this.leftBarDataGroup = [
              (res.data.tripartiteMaterialList || []).map(item => item.entryCount || 0),
              (res.data.tripartiteMaterialList || []).map(item => item.shipCount || 0),
              (res.data.tripartiteMaterialList || []).map(item => item.inStorageCount || 0),
            ]
            this.leftBarKey += 1;
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    getScrollboardData() {
      return new Promise((resolve, reject) => {
        operateRecordApi()
          .then(res => {
            this.scrollboardConfig = {
              headerBGC: 'rgba(255, 255, 255, 0.05)',
              oddRowBGC: 'rgba(255, 255, 255, 0.05)',
              evenRowBGC: 'rgba(255, 255, 255, 0)',
              waitTime: 3000,
              carousel: 'single', // 'single'|'page'
              align: ['center', 'center', 'center', 'center', 'center'],
              header: ['物料编号', '批次编号', '操作类型', '操作数量', '操作时间', '仓库名称'],
              data: (res.data || []).map(item => [
                item.code,
                item.modeCode,
                item.operateType === 'ENTRY' ? '入库' : item.operateType === 'SHIP' ? '出库' : '拣货',
                item.operateCount,
                parseTime(item.operateTime),
                item.warehouseName,
              ]),
            }
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    handlerRouter(path) {
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }

      this.$router.push(path);
    },
    logout() {
      this.$router.push('/');
    },
    resize(e) {
      if (this.$refs.dataScreenRef) {
        if (e.currentTarget.innerWidth < 1920) {
          // this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
          this.$refs.dataScreenRef.style.transform = `scale(${this.getScale()})`;
        } else {
          this.$refs.dataScreenRef.style.transform = `scale(1)`;
        }
      }
    },
    getScale(width = 1920, height = 1080) {
      let ww = window.innerWidth / width;
      // let wh = window.innerHeight / height;
      // return ww < wh ? ww : wh;
      return ww;
    },
    toggleFullScreen() {
      if (!this.isFullScreen) {
        if (document.documentElement.requestFullScreen) {
          document.documentElement.requestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.msRequestFullScreen) {
          document.documentElement.msRequestFullScreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }

      this.isFullScreen = !this.isFullScreen;
    },
    clearDataInterval() {
      if (this.interval) {
        clearInterval(this.interval)
        this.interval = null
      }
    },
  },
  destroyed() {
    this.clearDataInterval();
    clearInterval(this.timer);
    this.timer = null;
    window.removeEventListener("resize", this.resize);
  }
}
</script>

<style lang="scss" scoped>
.bigcontainer {
  width: 100%;
  height: 100%;
  background: #000D1E url("../../../assets/images/bigscreen/bg.png") no-repeat center 70px/cover;
  color: #fff;
}
.dataScreen-content {
    position: fixed;
    // top: 50%;
    // left: 50%;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    // transform: translate(-50%, -50%);
    transform-origin: left top;
}
.full-screen-container {
  background: #000D1E;
  color: #fff;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  background: url("../../../assets/images/bigscreen/topbg.png") no-repeat top center/cover;
  .header-left {
    font-size: 24px;
    width: 50%;
    color: #FFFFFF;
  }
  .header-right {
    font-size: 24px;
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    color: #FFFFFF;
    .user {
      display: flex;
      align-items: center;
      gap: 10px;
      .user-icon {
        width: 22px;
        height: 207px;
        .elimage {
          width: 100%;
          height: 100%;
        }
      }
    }
    .logout {
      width: 20px;
      height: 20px;
      cursor: pointer;
      .elimage {
        width: 100%;
        height: 100%;
      }
    }
  }
}

:deep(.header-item) {
  color: #72CCD3;
}

</style>
